<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 2600px;
            height: 2000px;
        }
    </style>
</head>

<body>
    <script>
        function showTop() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            console.log('滚动条位置：' + scrollTop);
        }
        // window.onscroll = showTop
        // showTop函数执行的太频繁了，给她防抖debounce 2秒执行一次

        /*
            假设onscroll触发了8次debounce
            第一次：执行debounce return了一个方法
            第二次-第8次：执行retrun 的那个方法
            闭包，timer不会被销毁
            timer不是Null,都执行到if语句里面
            最后只执行一次showTop方法 
         */
        window.onscroll = debounce(showTop, 2000)
        /* 
            假设onscroll出发了8次debounce
            这种不加括号的写法是执行了8次debounce 
            而不是执行8次retun 的方法
        */
        // window.onscroll = debounce

        function debounce(fn, delay) {
            console.log('debounce执行了');
            let timer = null //借助闭包 为了不让timer污染全局变量
            return function () {
                if (timer) {
                    clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
                    timer = setTimeout(fn, delay)
                    console.log('if执行了');
                } else {
                    console.log('else执行了');
                    timer = setTimeout(fn, delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
                }
            }
        }

        // function my(){
        //     console.log('my执行了');
        //     return function (){
        //         console.log(1);
        //     };
        // }
        // // 这两者区别
        // window.onscroll = my()
        // window.onscroll = my


        function debounce2(fn, delay) {
            let timmer = null;
            return function () {
                if (timmer) {
                    clearTimeout(timmer)
                    timmer = setTimeout(fn, delay)
                } else {
                    timmer = setTimeout(fn, delay)
                }
            }
        }

        function jieLiu(fn, delay) {
            let valid = true
            return function () {
                if (!valid) {
                    return false
                }
                valid = false
                setTimeout(() => {
                    fn();
                    valid = true
                }, delay)
            }
        }
    </script>

</body>

</html>